<template>
  <div class="lookdiv">
    <div style="margin-bottom: 10px;">
      <span>素材类型</span>
      <el-select v-model="queryInfo.type" placeholder="请选择" @change="handleSizeChange(1, 10)">
        <el-option label="图片" :value="0" />
        <el-option label="视频" :value="1" />
      </el-select>
    </div>
    <el-table :data="tableData" style="width: 100%" v-loading="tloading">
      <el-table-column prop="id" label="id" width="80"> </el-table-column>
      <el-table-column prop="type" label="素材" width="100">
        <template slot-scope="{ row }">
          <el-image
            v-if="row.type == 0"
            :preview-src-list="[row.imgPath]"
            :src="row.imgPath"
            alt=""
            style="width: 100px;"
          />
          <video controls v-if="row.type == 1" :src="row.imgPath" alt="" style="width: 100px;" />
        </template>
      </el-table-column>
      <el-table-column prop="type" label="素材类型" width="100">
        <template slot-scope="{ row }">
          {{ row.type == 0 ? "照片" : "视频" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上传时间"> </el-table-column>
      <el-table-column prop="option" label="操作" width="100">
        <template slot-scope="{ row }">
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delFunc(row.id)">
            <el-button slot="reference" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="(val) => handleSizeChange(1, val)"
      @current-change="(val) => handleSizeChange(val, queryInfo.limit)"
      :current-page="queryInfo.page"
      :page-size="queryInfo.limit"
      :page-sizes="[10, 20, 30, 50, 100]"
      layout="total, prev, pager, next,sizes"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { albumImgList, delImg } from "@/api/mini/yanxue";
export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      queryInfo: {
        page: 1,
        limit: 10,
        type: 0, //  0.照片 1.视频
      },
      tloading: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handleSizeChange(page, limit) {
      this.queryInfo = { ...this.queryInfo, page, limit };
      this.getData();
    },
    delFunc(id) {
      this.tloading = true;
      delImg(id).then((res) => {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getData();
      });
    },
    getData() {
      this.tloading = true;
      albumImgList({ ...this.queryInfo, albumId: this.id }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.tloading = false;
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
